<template>
  <div>
    <n-layout>
      <n-card content-style="padding: 15px 15px 15px 15px;">
        <n-space justify="space-between"  >
          <n-space>
            <n-steps :current="currentStep">
              <n-step
                  title="分镜设置"
              >
              </n-step>
              <n-step
                  title="批量出图"
              >
              </n-step>
            </n-steps>
          </n-space>
          <n-space>
            <n-space v-if="story?.name">
              <n-ellipsis style="max-width: 200px">{{ story.name }}
              </n-ellipsis>
            </n-space>
            <schdule_2 v-if="storyId" :storyId="storyId"></schdule_2>
            <n-button type="info" :size="'small'" @click="openStoryConfigSettingDrawer" v-if="currentStep == 2">
              绘画配置
            </n-button>

            <n-button
                :size="'small'" v-if="currentStep == 2"
                type="primary" @click="currentStep--">
              上一步
            </n-button>

            <n-button
                :size="'small'" v-if=" currentStep == 1"
                 type="primary" @click="currentStep++" :loading="nextStepLoading" >
              下一步
            </n-button>

           </n-space>
        </n-space>
      </n-card>
    </n-layout>
    <n-layout>
      <n-card v-if="currentStep > 0" :style="`min-height: ${clientHeight- 60.4}px; `" content-style="padding: 5px 5px 5px 5px;">
        <StoryBoardConfig :story="story"  v-if="currentStep===1">
        </StoryBoardConfig>
        <storyBoard
            ref="storyBoardRef"
            :storyId="storyId"
            :settingDrawerShow="settingDrawerShow"
            v-if="currentStep===2">
        </storyBoard>
       </n-card>
    </n-layout>
<!--    <Schdule v-if="storyId" :storyId="storyId"></Schdule>-->
    <GlobalUploader/>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref} from "vue";
import storyBoard from '@/views/pages/create/novel/components/storyboard.vue'
import {useRouter} from 'vue-router'
import {storyController} from "@/api/story/story.api"
import {storeToRefs} from "pinia"
import {useSystemStore} from "@/store/modules/useSystemStore"
import GlobalUploader from "@/components/file/box/GlobalUploader/GlobalUploader.vue";
import StoryBoardConfig from "@/views/pages/create/novel/components/storyBoardConfig.vue";
import Bus from '@/components/file/box/GlobalUploader/utils/bus.js'
import Schdule from '@/layout/schdule/index.vue'
import Schdule_2 from '@/layout/schdule/indexv2.vue'
const {currentRoute} = useRouter()
const route = currentRoute.value
const currentStep = ref(0)
const story = ref(null)
const storyId = ref("")
const promptTemplateWidth = ref(800)
const characterList = ref([])
const nextStepLoading = ref(false)
const settingDrawerShow = ref(false)
const {
  clientHeight
} = storeToRefs(useSystemStore());
const sceneList = ref({})
const storyBoardRef = ref(null)


import {userTagStore} from '@/store/tag/tagStore';



onMounted(async () => {
  storyId.value = route.query.storyId as string
  loadStory(storyId.value)
  promptTemplateWidth.value = window.innerWidth - 300
  window.addEventListener('resize', handleResize);
  await userTagStore().fetchDictionary()
})

const getStep = async () => {
  storyController.getStoryStep(storyId.value).then((res) => {
    if(res.code === 200){
      currentStep.value = Number(res.data)
    }
  })
}

// 窗口宽度变化
const handleResize = () => {
  promptTemplateWidth.value = window.innerWidth - 300;
}

const refreshStoryConfig = () => {
  Bus.emit('refreshStoryConfig')
}


const loadStory = (storyId: any) => {
  // 获取当前storyId
  storyController.getStoryById(storyId).then((res) => {
    if (res.code === 200) {
      story.value = res.data.story
      getStep()
    }
  })
}



const prevStep = () => {
  if (currentStep.value === 1) {
    return
  }
  currentStep.value --
}




const openStoryConfigSettingDrawer = () =>{
  Bus.emit('openStoryPaintConfigDrawer')
}


</script>
